<template>
	<view class="wrap">
		<view class="to-back">到账银行卡</view>
		<view class="back-no" @click="gopage">
			<view class="img-wrap">
				<image style="border-radius:19rpx" :src="dataObj.head_img" mode=""></image>
			</view>
			<view class="name-wrap">
				<view class="icon-wrap">
					<view>
						<view>开户人：{{dataObj.real_name}}</view>
						<view>银行卡号：{{dataObj.nickname}}</view>
					</view>
					<view>
						<text class="yticon icon-you"></text>
					</view>
				</view>
				
				
			</view>
		</view>
		
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.name}}
			</view>
		</view>
		
		
		
		
		<view class="money-wrap">
			<view class="tip-top">提现金额</view>
			<view class="input-wrap">
				<view class="label">
					￥
				</view>
				<input class="uni-input" type="number" v-model="amount" placeholder="" />
				<view class="del-btn" @click="amount=''" v-show="amount!==''">
					
				</view>
			</view>
			<view class="money-bottom">
				<view class="can-use">可用余额 ￥{{navList.length>0?navList[tabCurrentIndex].balance:''}}，</view>
				<view class="out-all" @click="qbtx">全部提现</view>
			</view>
		</view>
		<view class="tip-last">
			<view class="desc" v-for="(item,index) in noteList" :key="index">
				{{item}}
			</view>
		</view>
		<view class="sub-btn" @click="bottomsub">
			提现
		</view>
		<paypass ref="yspay" @cancel="cancelpay" @submit="submitpay"></paypass>
	</view>
</template>

<script>
	import paypass from "@/components/ys-paypass/ys-paypass.vue";
	export default{
		components:{
			paypass
		},
		data(){
			return{
				noteList:[],
				method:[],
				tabCurrentIndex:0,
				amount:'',
				dataObj:{
					note:[]
				},
				navList: [
					
				]
			}
		},
		onShow(){
			this.getData()
		},
		onNavigationBarButtonTap:function(e){
			
			
			uni.navigateTo({
				url: `../bizhongmingxi/index`
			});
		               
		 },
		methods:{
			qbtx(){
				this.amount=this.navList[this.tabCurrentIndex].balance
			},
			tabClick(index){
				
				this.tabCurrentIndex = index;
				this.noteList=this.navList[index].note
			},
			gopage(){
				
				uni.navigateTo({
				    url: `../setyinhangka/index`
				});
			},
			bottomsub(){
				
				if(this.amount==''){
					uni.showToast({
					    title: '输入提现数量',
					    dduration:4000,
						icon:'none'
					});
					return
				}
				if(this.amount>this.dataObj.balance){
					uni.showToast({
					    title: '超出可提现数量',
					    dduration:4000,
						icon:'none'
					});
					return
				}
				this.$refs.yspay.show();
			},
			cancelpay(){
				
			},
			submitpay(ex){
				this.subData(ex.value)
			},
			subData(pwd){
				let that=this
				uni.showModal({
				    title: '确认提交？',
				    content: '',
				    success: function (res) {
				        if (res.confirm) {
				            that.apipost('/api/user/withdraw_v2',{
								amount:that.amount,
								pwd,
								name:that.navList[that.tabCurrentIndex].name
				            },true).then(res => {
				            	if(res.Code==10200){
									uni.showToast({
										title: res.Message,
										duration:4000,
										icon: 'none'
									});
									uni.navigateTo({
										url: `../bizhongmingxi/index`
									});
									//uni.navigateBack()
				            		// let data=res.Data?res.Data:{}
				            		// that.dataObj=res.Data?res.Data:{}
				            		// that.src=that.dataObj.charge_address
				            	}
				            	
				            }).catch(err=>{
				            	console.log(err)
				            });
				        } else if (res.cancel) {
				            
				        }
				    }
				});
			},
			getData(){
				let that=this
				
				that.apiget('/api/user/get_withdraw_info_v2').then(res => {
					if(res.Code==10200){
						that.navList=res.Data.method
						that.dataObj=res.Data
						if(that.navList.length>0){
							that.noteList=res.Data.method[0].note
						}
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background:#f0f0f0;
	}
	
	
	
	.navbar{
		box-sizing: border-box;
		display: flex;
		height: 40px;
		
		margin:12rpx auto;
		
		border-radius:14rpx;
		padding:12rpx 20rpx;
		
		background: #f7f7f7;
		
		position: relative;
		z-index: 10;
		
		.nav-item{
			border-radius: 14rpx;
			
			flex: 1;
			
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			
			&.current{
				
				background:#fff;
				color: $base-color;
			}
		}
	}
	
	
	.icon-wrap{
		align-items:center;
		justify-content:space-between;
		display:flex;
	}
	.sub-btn{
		position:fixed;
		bottom:30rpx;
		border-radius:20rpx;
		left:36rpx;
		right:36rpx;
		color:#fff;
		background:#f9436b;
		height:100rpx;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.tip-last .desc{
		padding-top:15rpx;
	}
	.tip-last{
		color:#9d9d9d;
		padding-top:34rpx;
	}
	.out-all{
		color:#536f9e;
	}
	.money-bottom{
		display:flex;
		color:#929292;
		padding:42rpx 0 0 0;
		
	}
	.input-wrap .label{
		
		padding-right:44rpx;
	}
	.input-wrap{
		
		font-size:54rpx;
		display:flex;
		align-items:baseline;
		border-bottom:1rpx solid #e2e2e2;
	}
	.input-wrap input{
		flex:1;
		font-size:94rpx;
		fon-weight:bold;
	}
	.tip-top{
		margin-bottom:50rpx;
	}
	.del-btn{
		position:relative;
		top:-20rpx;
		height:50rpx;
		width:50rpx;
		background:url(/static/qingchu.png) no-repeat center;
		background-size:100% 100%;
	}
	.money-wrap{
		background:#f5f5f5;
		border-radius:18rpx;
		padding:36rpx;
	}
	.back-no{
		margin-bottom:78rpx;
		display:flex;
		align-items:center;
	}
	.name-wrap{
		flex:1;
	}
	.img-wrap{
		margin-right:16rpx;
		width:100rpx;
		height:100rpx;
	}
	.wrap{
		padding:0 26px;
	}
	.to-back{
		padding:40rpx 0 14rpx 0;
	}
</style>
